define(['jquery', 'vue', 'common', 'ELEMENT'], function ($, Vue, common, ELEMENT) {
    var Controller = {
        index: function () {
            const {createApp, ref, onMounted,watch} = Vue
            const app = createApp({
                setup() {
                    //用户信息
                    const userInfo = ref({})
                    //默认选择的菜单
                    const activeMenu = ref('');
                    //默认选择的标签
                    const activeTab = ref('');
                    //所有菜单
                    const menuItems = ref([]);
                    //所有标签
                    const tabs = ref([]);
                    //转换菜单风格
                    const collapse = ref(false)
                    //压缩菜单
                    const contract = ref(false)
                    //主题
                    const theme = ref({
                        theme_color: Config.theme.theme_color,
                        horizontal_background: Config.theme.horizontal_background,
                        vertical_background: Config.theme.vertical_background,
                    })
                    //显示主题颜色选择
                    const showChangeTheme = ref(false)
                    //关闭标签
                    const closeTab = (tabKey) => {
                        const index = tabs.value.findIndex(tab => tab.key === tabKey);
                        if (index > -1) {
                            tabs.value.splice(index, 1);
                            if (activeTab.value === tabKey) {
                                activeTab.value = tabs.value[Math.max(0, index - 1)].key;
                            }
                        }
                    };
                    //临时修改主题
                    const onSubmitTemp = ()=>{
                        common.changeTheme(theme.value.theme_color)

                        for(let key=0;key<tabs.value.length;key++){
                            let iframe = document.getElementById(tabs.value[key].key);
                            // console.log(iframe.contentWindow)
                            iframe.contentWindow.postMessage({
                                action:'changeTheme',
                                data:theme.value.theme_color
                            })
                        }


                    }
                    const updateMenu = ()=>{
                        common.sendPost().then(res=>{
                            console.log('重新获取菜单')
                            // console.log(res)
                            if(res.code==1){
                                userInfo.value = res.data.user
                                menuItems.value = res.data.rule
                                // console.log("获取菜单",Config)
                                if(Config.referer){
                                    // console.log("添加菜单")
                                    addMain(Config.referer)
                                }
                            }
                        })
                    }
                    onMounted(()=>{
                        //获取用户信息和所有菜单
                        updateMenu()
                        common.changeTheme(Config.theme.theme_color)
                        window.updateMenu = function (){
                            updateMenu()
                        }
                    })
                    //添加菜单和标签
                    const addMain = (row)=>{
                        // console.log(row,'rrrrrrrrrrrrrrrrrr')
                        let key = row.id.toString()
                        if(row.route){
                            let route = '/'+row.module+'/'+row.route
                            if(route.indexOf('?')!=-1){
                                route = route + '&addtabs=1';
                            }else{
                                route = route + '?addtabs=1';
                            }
                            let allKey = [];
                            tabs.value.forEach(item=>{
                                allKey.push(item.key)
                            })
                            // console.log(route,'route')
                            if(!allKey.includes(key)){
                                tabs.value.push({label:row.title,key:key,route:route,icon:row.icon?row.icon:''})
                            }
                            activeTab.value = key
                        }
                    }
                    //退出登录
                    const logout = ()=>{
                        common.sendGet('logout').then(res=>{
                            if(res.code==1){
                                common.successMessage('退出成功',()=>{
                                    window.location.href = common.getActionUrl('login');
                                })
                            }else{
                                common.errorMessage(res.msg)
                            }
                        })
                    }
                    //切换标签
                    const changeTabs = (key)=>{
                        // console.log(key)
                        activeMenu.value = parseInt(key)
                    }
                    //监听标签切换
                    watch(activeTab,(newvalue,oldvalue)=>{
                        activeMenu.value = parseInt(newvalue)
                    })
                    return {
                        activeMenu,
                        activeTab,
                        menuItems,
                        tabs,
                        closeTab,
                        Config:Config,
                        userInfo,
                        addMain,
                        logout,
                        collapse,
                        contract,
                        theme,
                        showChangeTheme,
                        onSubmitTemp,
                        changeTabs,
                        updateMenu
                    }
                }

            })
            common.load(app, true,['MenuItem'])
            app.mount('#app')
        },
        login: function () {
            const {createApp, ref, reactive} = Vue
            const app = createApp({
                setup() {
                    const loginForm = ref({
                        username: '',
                        password: '',
                    });
                    common.sendAjax("",()=>{
                        console.log('test')
                    })
                    const onSubmit = () => {
                        console.log(loginForm.value, Config)
                        // let url = common.getActionUrl('login')
                        common.sendSubmit('login',loginForm.value).then(res=>{
                            if(res.code==1){
                                common.successMessage('登录成功',()=>{
                                    window.location.href = common.getActionUrl('index');
                                })
                            }
                        }).catch((error)=>{
                            common.errorMessage(error.msg?error.msg:'登录失败');
                        })
                    }
                    const rules = reactive({
                        username: [
                            {required: true, message: '请输入账号', trigger: 'blur'},
                            {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                        ],
                        password: [
                            {required: true, message: '请输入密码', trigger: 'blur'},
                            {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                        ]
                    });
                    common.changeTheme(Config.theme.theme_color)
                    return {
                        loginForm,
                        rules,
                        onSubmit,
                    }
                }
            })
            common.load(app)
            app.mount('#app')
        }
    }
    return Controller;
})